var timerArr = [];
var rotateDeg = 0;

function startPlaceTubes(tubeNum) {

    var mapping = ['right', 'top', 'left', 'bottom'],
        pos = {
            right: [4, 8, 5, 9, 6, 10, 7, 11, 0, 12, 1, 13, 2, 14, 3, 15],
            top: [13, 14, 9, 10, 5, 6, 1, 2, 12, 15, 8, 11, 4, 7, 0, 3],
            left: [11, 7, 10, 6, 9, 5, 8, 4, 15, 3, 14, 2, 13, 1, 12, 0],
            bottom: [2, 1, 6, 5, 10, 9, 14, 13, 3, 0, 7, 4, 11, 8, 15, 12]
        },
        tds = {
            right: $("#right td"),
            top: $("#top td"),
            left: $("#left td"),
            bottom: $("#bottom td")
        },
        num = Math.ceil(tubeNum / 4),
        count = 0,
        timer = 0,
        rotateCount = 0,
        startIndex = Number($("#arm select").val()),
        key;

    for (var times = 0; times < 4; times++) {

        key = mapping[(startIndex+times) % 4];

        rotateCount++;
        
        for (var i = 0; i < num; i++) {
            
            // for tube display
            count++;
            timer++;
            var td = tds[key].get(pos[key][i]);

            (function(context, count, timer) {

                var t = setTimeout(function() {

                    var counter;
                    if (count > tubeNum) {
                        counter = Number($("#counternew").text()); 
                        $("#counternew").text(counter+1);
                        context.style.backgroundColor = 'yellow';
                    } else {
                        context.style.backgroundColor = 'green';
                    }

                    counter = Number($("#counter").text());
                    $("#counter").text(counter+1);
                }, timer*1000);

                timerArr.push(t);
                return t;

            })(td, count, timer);
        }

        // for container rotate
        if (rotateCount != 4) {

            timer++;
            
            (function(timer) {
            
                var t = setTimeout(function() {
                    
                    $("#container").animate({
                        rotate: '+=90'
                    }, 1000);

                    rotateDeg += 90;

                }, timer*1000);
            
                timerArr.push(t);
                return t;
            
            })(timer);

            // animation for 1s
            timer++;
        }
    }
}

function reset() {

    var tds = {
            top: $("#top td"),
            left: $("#left td"),
            bottom: $("#bottom td"),
            right: $("#right td")
        };

    // clear all undo animation
    for (var i = 0, len = timerArr.length; i < len; i++) {
        clearTimeout(timerArr[i]);
    }
    timerArr = [];

    // reset tables
    for (var key in tds) {
        for (var i = 0, len = tds[key].length; i < len; i++) {
            tds[key][i].style.backgroundColor = 'white';
        }
    }
 
    // reset counter
    $("#counter").text(0);
    $("#counternew").text(0);

    // reset the position
    $("#container").animate({
        rotate: '+=' + (360 - rotateDeg % 360)
    }, 0);
    rotateDeg = 0;
}

$(document).ready(function() {

    $("#tubenum").focus();

    // reset 
    $("#reset").click(function() {

        reset();

        // clear the input content
        $("#tubenum").val("");
        $("#tubenum").focus();
    });

    // start  
    $("#start").click(function() {
        var tubeNum = $("#tubenum").val();
        reset();
        startPlaceTubes(tubeNum);
    });
});